<template>
      <el-menu
          label="选择房间"
          active-text-color="#394867"
          background-color="#9BA4B4"
          text-color="#F1F6F9"
          mode="horizontal"
          :default-active="activeIndex"
          router
      >
        <el-menu-item index="index" route="/index">主页</el-menu-item>
        <el-menu-item index="barrageWordCould" route="/barrageWordCould">弹幕词云图</el-menu-item>
        <el-menu-item index="barrageTop" route="/barrageTop">弹幕发送量分析</el-menu-item>
      </el-menu>
    <div class="content">
      <router-view></router-view>
    </div>
</template>
<script>
export default {
  name: "Index",
  setup() {
    let activeIndex = window.location.hash
    let routeIndex1 = activeIndex.substring(activeIndex.indexOf("/") + 1)
    if("" === routeIndex1) {
      activeIndex = "composite"
    }else if(-1 === routeIndex1.indexOf("/")) {
      activeIndex = routeIndex1
    }else {
      activeIndex = routeIndex1.substring(0, routeIndex1.indexOf("/"))
    }
    return {
      activeIndex
    }
  }
}
</script>

<style>
body {
  background: #a1afc9;
}
.content {
  margin-top: 30px;
  height:800px;
}
</style>